<!doctype html>
<html class="no-js" lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Real Estate Template</title>
        <link rel="stylesheet" href="css/app.css">
    </head>
    <body>
        <div class="top-bar">
            <div class="top-bar-left">
                <ul class="menu">
                    <li class="menu-text">Interplanetary</li>
                    <li><a href="#">One</a></li>
                    <li><a href="#">Two</a></li>
                    <li><a href="#">Three</a></li>
                </ul>
            </div>
            <div class="top-bar-right">
                <ul class="menu">
                    <li>
                        <a href="#">Account</a>
                    </li>
                    <li>
                        <button class="button">Login</button>
                    </li>
                </ul>
            </div>
        </div>
        <br>
        <article class="grid-container">
            <div class="grid-x grid-margin-x">
                <div class="cell medium-7 large-6">
                    <h1>Close Your Eyes and Open Your Mind</h1>
                    <p class="subheader">
                        There is beauty in space, and it is orderly. There is no weather, and there is regularity. It is
                        predictable. Everything in space obeys the laws of physics. If you know these laws, and obey
                        them, space will treat you kindly.
                    </p>
                    <button>Take a Tour</button>
                    <button>Start a free trial</button>
                </div>
                <div class="cell large-3 show-for-large">
                    <img src="https://placehold.it/400x370&text=PSR1257 + 12 C" alt="picture of space">
                </div>
                <div class="cell small-5 large-3">
                    <div class="callout secondary">
                        <form action="">
                            <label>Find Your Deam Planet
                                <input type="text" placeholder="Search destinations"></label>
                            <label>Number of Moons
                                <input type="number" placeholder="Moons required"></label>
                            <button class="button">Search Now!</button>
                        </form>
                    </div>
                </div>
            </div>
            <hr>
            <p class="lead">Trending Planetary Destinations</p>
            <div class="grid-x grid-margin-x small-up-1 medium-up-2 large-up-3">
                <div class="cell">
                    <div class="callout">
                        <p>Pegasi B</p>
                        <p>
                            <img src="https://placehold.it/400x370&text=Pegasi B" alt="pace to place">
                        </p>
                        <p class="lead">Copernican Revolution caused an uproar</p>
                        <p class="subheader">
                            Find Earth-like planets life outside the Solar System
                        </p>
                    </div>
                </div>
                <div class="cell">
                    <div class="callout">
                        <p>Pegasi B</p>
                        <p>
                            <img src="https://placehold.it/400x370&text=Pegasi B" alt="pace to place">
                        </p>
                        <p class="lead">Copernican Revolution caused an uproar</p>
                        <p class="subheader">
                            Find Earth-like planets life outside the Solar System
                        </p>
                    </div>
                </div>
                <div class="cell">
                    <div class="callout">
                        <p>Pegasi B</p>
                        <p>
                            <img src="https://placehold.it/400x370&text=Pegasi B" alt="pace to place">
                        </p>
                        <p class="lead">Copernican Revolution caused an uproar</p>
                        <p class="subheader">
                            Find Earth-like planets life outside the Solar System
                        </p>
                    </div>
                </div>
                <div class="cell">
                    <div class="callout">
                        <p>Pegasi B</p>
                        <p>
                            <img src="https://placehold.it/400x370&text=Pegasi B" alt="pace to place">
                        </p>
                        <p class="lead">Copernican Revolution caused an uproar</p>
                        <p class="subheader">
                            Find Earth-like planets life outside the Solar System
                        </p>
                    </div>
                </div>
                <div class="cell">
                    <div class="callout">
                        <p>Pegasi B</p>
                        <p>
                            <img src="https://placehold.it/400x370&text=Pegasi B" alt="pace to place">
                        </p>
                        <p class="lead">Copernican Revolution caused an uproar</p>
                        <p class="subheader">
                            Find Earth-like planets life outside the Solar System
                        </p>
                    </div>
                </div>
                <div class="cell">
                    <div class="callout">
                        <p>Pegasi B</p>
                        <p>
                            <img src="https://placehold.it/400x370&text=Pegasi B" alt="pace to place">
                        </p>
                        <p class="lead">Copernican Revolution caused an uproar</p>
                        <p class="subheader">
                            Find Earth-like planets life outside the Solar System
                        </p>
                    </div>
                </div>
            </div>
            <a href="#" class="button expanded hollow">Load More</a>
        </article>
        <footer>
            <div class="grid-x callout secondary">
                <div class="cell small-6 large-3">
                    <h4>Offices</h4>
                    <ul class="menu vertical">
                        <li><a href="#">One</a></li>
                        <li><a href="#">Two</a></li>
                        <li><a href="#">Three</a></li>
                        <li><a href="#">Four</a></li>
                    </ul>
                </div>
                <div class="cell small-6 large-3">
                    <h4>Solar Systems</h4>
                    <ul class="menu vertical">
                        <li><a href="#">One</a></li>
                        <li><a href="#">Two</a></li>
                        <li><a href="#">Three</a></li>
                        <li><a href="#">Four</a></li>
                    </ul>
                </div>
                <div class="cell small-6 large-3">
                    <h4>Contact</h4>
                    <ul class="menu vertical">
                        <li><a href="#"><i class="fi-social-twitter"></i> Twitter</a></li>
                        <li><a href="#"><i class="fi-social-facebook"></i> Facebook</a></li>
                        <li><a href="#"><i class="fi-social-instagram"></i> Instagram</a></li>
                        <li><a href="#"><i class="fi-social-pinterest"></i> Pinterest</a></li>
                    </ul>
                </div>
                <div class="cell small-6 large-3">
                    <h4>Offices</h4>
                    <ul class="menu vertical">
                        <li><a href="#">One</a></li>
                        <li><a href="#">Two</a></li>
                        <li><a href="#">Three</a></li>
                        <li><a href="#">Four</a></li>
                    </ul>
                </div>
            </div>
            <div class="grid-x">
                <div class="cell medium-6">
                    <ul class="menu align-center">
                        <li><a href="#">Legal</a></li>
                        <li><a href="#">Partner</a></li>
                        <li><a href="#">Explore</a></li>
                    </ul>
                </div>
                <div class="cell medium-6">
                    <ul class="menu align-center">
                        <li class="menu-text">Copyright 2018</li>
                    </ul>
                </div>
            </div>
        </footer>
        <script src="node_modules/jquery/dist/jquery.js"></script>
        <script src="node_modules/what-input/dist/what-input.js"></script>
        <script src="node_modules/foundation-sites/dist/js/foundation.js"></script>
        <script src="js/app.js"></script>
    </body>
</html>
